<template>
  <div>
    <span>我是vxetableStudent组件！！！</span>
    <div  id="mychart" style="height: 200px;width: 200px"></div>
  </div>
</template>

<script>

export default {
  // import 引入的组件需要注入到对象中才能使用
  name:'index',
  data () {
    // 这里存放数据
    return {
      myChart: {},
      option:
     {
        tooltip: {
          trigger: 'item'
        },
       //调节tip位置数据
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {
            //取个名
            name: 'Access From',
            //类型
            type: 'pie',
            //圆角率
            radius: ['40%', '70%'],
            //？？？？
            avoidLabelOverlap: false,
            //每一个元素边框样式
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            //每一个元素的标题
            label: {
              show: false,
              position: 'center'
            },
            //
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            //???
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '班级' },
              { value: 735, name: '学生' },
              { value: 580, name: '年级' },
              { value: 484, name: '教师' },
            ]
          }
        ]
      },
    }
  },
  methods:{

  },
  mounted() {
    const chartDom = document.getElementById('mychart');//获取容器（dom节点）
    //设计模块：工厂设计、单例模式（饿汉式）
    const myChart = this.$echarts.init(chartDom);//初始化一个echarts对象
     myChart.setOption(this.option);//设置配置项option
  }
}
</script>

<style scoped>

</style>
